<template>
	<view>
		<u-navbar title="设置密码" @leftClick="leftClick" placeholder safeAreaInsetTop>
		</u-navbar>
		<!-- 密码三个 -->
		<view class="password" v-for="(item, index) in userList" :key="index">
			<view class="contentuser">
				<view class="user">
					{{ item.user }}
				</view>
				<view class="contentuserText">
					<!-- 两个框和两个眼睛 -->
					<input v-model="passwords[index]" maxlength="20" type="password" v-show="eyeVisible[index]"
						@blur="validatePassword" class="input" placeholder="请输入密码" />
					<input v-model="passwords[index]" maxlength="20" type="text" v-show="!eyeVisible[index]"
						@blur="validatePassword" class="input" placeholder="请输入密码" />
					<u-icon name="eye-fill" v-if="!eyeVisible[index]" size="28"
						@click="togglePasswordVisibility(index)"></u-icon>
					<u-icon name="eye-off" size="28" v-if="eyeVisible[index]"
						@click="togglePasswordVisibility(index)"></u-icon>
				</view>
			</view>
			<view class="border"></view>
		</view>
		<view class="signPut bg-color-base" @click="signPut"> 更改密码 </view>
		<u-toast ref="uToast1" />
	</view>
</template>
<script>
	import {
		changePassword
	} from "@/common/api/index";
	export default {
		name: "setPassword",
		data() {
			return {
				password: false,
				eyeVisible: [true, true, true], // 控制眼睛图标显示状态的数组
				eyefill: true,
				eyeoff: false,
				yuanmima: "12345",
				passwords: ["", "", ""], // 三个 input 的值分别保存在数组中,
				userList: [{
						user: "原密码",
					},
					{
						user: "新密码",
					},
					{
						user: "确认新密码",
					},
				],
			};
		},
		mounted() {},
		computed: {},
		methods: {
			leftClick() {
				uni.switchTab({
					url: `/pages/index/index`,
				})
			},
			// 密码长度要求示例：6-20位
			validatePassword(event) {
				const password = event.detail.value;
				if (password.length < 6 || password.length > 20) {
					this.password = false;
					this.$refs.uToast1.show({
						message: "密码长度应为6-20位",
						type: "error",
						duration: 2000,
						position: "top",
					});
					return;
				}
				this.password = true;
			},
			togglePasswordVisibility(index) {
				// 使用 $set手动更新
				this.$set(this.eyeVisible, index, !this.eyeVisible[index]);
			},
			async signPut() {
				// 检查新密码和确认新密码是否匹配
				if (this.passwords[1] !== this.passwords[2]) {
					this.$refs.uToast1.show({
						message: "新密码和确认新密码不匹配",
						type: "error",
						duration: 2000,
						position: "top",
					});
					return;
				} else if (this.userPwd == this.passwords[1]) {
					this.$refs.uToast1.show({
						message: "原密码和新密码相同无需修改",
						type: "error",
						duration: 2000,
						position: "top",
					});
					return;
				} else if (this.passwords[1] == this.passwords[2] && this.password) {
					try {
						// 修改密码接口
						const passwordRes = await changePassword({
							old_password: this.passwords[0],
							password: this.passwords[1],
							password_confirm: this.passwords[2],
						});
						console.log(passwordRes);

						if (passwordRes.code == 1) {
							this.$refs.uToast1.show({
								message: passwordRes.msg,
								type: "success",
								duration: 2000,
								position: "top",
							});
							uni.switchTab({
								url: "/pages/index/index",
							});
						} else {
							this.$refs.uToast1.show({
								message: passwordRes.msg,
								type: "error",
								duration: 2000,
								position: "top",
							});
						}
					} catch (err) {
						console.log(err);
					}
				} else {
					this.$refs.uToast1.show({
						message: "密码长度应为6-20位",
						type: "error",
						duration: 2000,
						position: "top",
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.input {
		// background-color: red;
		height: 100rpx;
	}

	.user {
		font-size: 32rpx;
		font-family: Inter, Inter;
		font-weight: 400;
		color: #333333;
		padding-left: 10rpx;
	}

	.contentuser {
		display: flex;
		// padding-right: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		height: 116rpx;
	}

	.contentuserText {
		display: flex;
		width: 400rpx;
		// background-color: aqua;
		font-size: 28rpx;
		font-family: Inter, Inter;
		padding-right: 15rpx;
		font-weight: 400;
		color: #666666;
	}

	.border {
		width: 656rpx;
		height: 1rpx;
		opacity: 1;
		border-bottom: 0.5rpx solid #d2d2d2;
	}

	.password {
		box-sizing: border-box;
		padding-left: 40rpx;
	}

	.signPut {
		width: 90%;
		font-size: 32rpx;
		height: 80rpx;
		color: #ffffff;
		border-radius: 68rpx;
		margin-top: 82rpx;
		text-align: center;
		line-height: 80rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.bg-color-base {
		background-color: #5064eb;
	}
</style>